<template>
  <FormItem v-show="formItemFlag"
            :prop="component.compConfigData.fieldConfig.bindingFieldName"
            :label="label"
            :label-width="labelWidth"
            :label-for="component.compConfigData.formItemConfig.labelFor"
            :required="component.compConfigData.formItemConfig.required"
            :rules="component.compConfigData.formItemConfig.rules"
            :show-message="component.compConfigData.formItemConfig.showMessage"
  >
    <slot></slot>
  </FormItem>
</template>

<script>

export default {
  name: "FormItemWrapper",
  props: {
    component: {
      type: Object
    }
  },
  data() {
    return {

    }
  },
  mounted() {

  },
  methods: {},
  computed: {
    formItemFlag() {
      if (this.$store.state.release.pageMetadata && this.component.compConfigData.formItemConfig.hidden) {
        return false
      }
      return true
    },
    label() {
      if (this.component.compConfigData.formItemConfig.hiddenLabel) {
        return ''
      }
      return this.component.compConfigData.formItemConfig.label
    },
    labelWidth() {
      if (this.component.compConfigData.formItemConfig.hiddenLabel) {
        return 0
      }
      return this.component.compConfigData.formItemConfig.labelWidth
    }
  },
  watch: {}
}
</script>

<style scoped>

</style>
